<template>
  <div style="background-color: #f7f7f7">
    <div class="register-wrapper">
      <el-form ref="form" label-width="130px" :rules="rules" :model="registerForm">
        <el-form-item label="收货人：" prop="">
          <el-input
            type="text"
            v-model="registerForm.username"
            placeholder="请输入收货人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="">
          <el-input
            type="text"
            v-model="registerForm.username"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="所在区域：" prop="">
          <el-cascader
            v-model="value"
            :options="options"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址：" prop="">
          <el-input
            type="text"
            v-model="registerForm.username"
            placeholder="请输入详细地址"
          ></el-input>
        </el-form-item>
        
      </el-form>

      <el-button type="primary" class="submit-btn">保存地址并使用</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "addressInfo",
  components: {},
  data() {
    return {
      rules: {},
      registerForm: {},
      options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }]
        }]  ,
      value: "",
    };
  },

  methods: {
    submit() {
      console.log(1);
    },
  },
};
</script>

<style lang="scss" scoped>
.register-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1200px;
  background: #ffffff;
  border-radius: 0px;
  padding: 60px 0;
  margin: 60px auto;

  .tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;

    .tab {
      padding: 0 60px;
      font-weight: 400;
      font-size: 22px;
      color: #333333;
      cursor: pointer;
    }

    .active {
      font-weight: bold;
      font-size: 22px;
      color: #fe5a13;
    }

    .underline {
      width: 40px;
      height: 6px;
      background: #fe5a13;
      border-radius: 3px;
      margin-top: 20px;
    }
  }
}

.sms-code-wrapper {
  width: 550px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  ::v-deep .el-input__inner {
    position: relative;
    z-index: 10075;
    width: 400px;
    border-color: transparent !important;
    border: 0;
    border-radius: 0;
  }
  &:has(.el-input__inner:focus) {
    border-color: #fe5a13;
  }

  .send-code-btn {
    display: flex;
    align-items: center;
    height: 30px;
    font-weight: 400;
    font-size: 16px;
    color: #fe5a13;
    padding: 0rem 30px;
    border-left: 1px solid #ccc;
    cursor: pointer;
  }
}

.remerber-pwd {
  cursor: pointer;
  margin-left: 130px;

  .icon-radio {
    position: relative;
    top: 2px;
    width: 20px;
    height: 20px;
    margin-right: 12px;
  }

  .agreement:hover {
    text-decoration: underline;
    color: #808080;
  }

  span {
    font-weight: 400;
    font-size: 16px;
    color: #808080;
  }
}

::v-deep .el-form-item__label {
  line-height: 56px;
  font-size: 16px;
  width: 120px;
}

// 设置文本框长度
::v-deep .el-input__inner {
  width: 548px;
  height: 56px;
  font-size: 16px;
}

::v-deep .el-cascader-node__label{
    font-size: 16px;
}

// 上传图片占位图的尺寸
::v-deep .el-upload--picture-card {
  width: 200px;
  height: 130px;
}

::v-deep .el-select-dropdown__item {
  font-size: 16px !important;
}

.submit-btn {
  width: 548px;
  height: 60px;
  border-radius: 10px;
  margin: 70px 0 30px 0;
  font-size: 20px;
}
</style>
